<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"
  />
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  <title>登录Frame</title>
  <link rel="stylesheet" type="text/css" href="../css/api.css" />
  <style>
    body {
      text-align: center;
    }

    .row {
      width: auto;
      height: 70px;
      box-sizing: border-box;
      margin-left: 32px;
      margin-right: 32px;
      padding-top: 40px;
      border-bottom: 1px solid #888;
    }

    .input {
      width: 100%;
      height: 20px;
      border: none;
      outline: none;
      font-size: 16px;
      line-height: 20px;
    }

    .btn {
      width: auto;
      height: 50px;
      margin-left: 32px;
      margin-right: 32px;
      margin-top: 32px;
      background-color: #f60;
      line-height: 50px;
      color: #fff;
      font-size: 24px;
      text-align: center;
      border-radius: 8px;
    }

    .btn-third-party {
      display: inline-block;
      width: auto;
      height: 50px;
      box-sizing: border-box;
      margin-top: 32px;
      margin-left: auto;
      margin-right: auto;
      padding: 8px 8px 8px 8px;
      font-size: 20px;
      color: #888;
      line-height: 32px;
      text-align: left;
      border: 1px solid #aaa;
      /* background-image: url(../image/share_friend.png); */
      background-repeat: no-repeat;
      background-size: auto 20px;
      background-position: 8px center;
      border-radius: 8px;
    }

    .highlight {
      opacity: 0.7;
    }
  </style>
</head>

<body>
  <div class="row">
    <input id="username" class="input" type="text" placeholder="用户名">
  </div>
  <div class="row">
    <input id="password" class="input" type="password" placeholder="密码">
  </div>
  <div class="btn" tapmode="highlight" onclick="fnLogin();">登录</div>
  <!-- <div class="btn-third-party">使用微信登录</div> -->
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
  apiready = function () {
    fnInitUIInput();
  };

  var UIInput;
  var usernameUIInputId;
  var passwordUIInputId;
  var usernameValue;
  var passwordValue;


  function fnInitUIInput() {
    // 用户名输入框模块
    var username = $api.byId('username');
    var usernameRect = $api.offset(username);
    UIInput = api.require('UIInput');
    UIInput.open({
      rect: {
        x: usernameRect.l,
        y: usernameRect.t,
        w: usernameRect.w,
        h: usernameRect.h
      },
      styles: {
        bgColor: '#fff',
        size: 16,
        color: '#000',
        placeholder: {
          color: '#ccc'
        }
      },
      autoFocus: false,
      maxRows: 1,
      placeholder: '用户名',
      keyboardType: 'default',
      fixedOn: api.frameName
    }, function (ret, err) {
      if (ret) {
        usernameUIInputId = ret.id;
        if (ret && ret.eventType == "show") {
          setTimeout(function () {
            UIInput.popupKeyboard({
              id: usernameUIInputId
            });
          }, 200);
        } else if (ret.eventType == "change") {
          UIInput.value({
            id: usernameUIInputId
          }, function (ret, err) {
            if (ret) {
              if (ret.status) {
                usernameValue = ret.msg;
              }
            }
          });
        }
      }
    });

    // 密码输入框模块
    var password = $api.byId('password');
    var passwordRect = $api.offset(password);
    UIInput.open({
      rect: {
        x: passwordRect.l,
        y: passwordRect.t,
        w: passwordRect.w,
        h: passwordRect.h
      },
      styles: {
        bgColor: '#fff',
        size: 16,
        color: '#000',
        placeholder: {
          color: '#ccc'
        }
      },
      autoFocus: false,
      maxRows: 1,
      placeholder: '密码',
      keyboardType: 'default',
      inputType: 'password',
      fixedOn: api.frameName
    }, function (ret, err) {
      if (ret) {
        passwordUIInputId = ret.id;
        if (ret.eventType == "change") {
          UIInput.value({
            id: passwordUIInputId
          }, function (ret, err) {
            if (ret) {
              if (ret.status) {
                passwordValue = ret.msg;
              }
            }
          });
        }
      }
    });
  }

  // 登录
  function fnLogin() {
    if (!usernameValue) {
      if (api.systemType == 'android') {
        setTimeout(function () {
          UIInput.popupKeyboard({
            id: usernameUIInputId
          });
        }, 200);
      } else {
        UIInput.popupKeyboard({
          id: usernameUIInputId
        });
      }
      return;
    }
    if (!passwordValue) {
      if (api.systemType == 'android') {
        setTimeout(function () {
          UIInput.popupKeyboard({
            id: passwordUIInputId
          });
        }, 200);
      } else {
        UIInput.popupKeyboard({
          id: passwordUIInputId
        });
      }
      return;
    }

    api.ajax({
      url: 'http://d.apicloud.com/mcm/api/user/login',
      method: 'post',
      headers: {
        "X-APICloud-AppId": "A6921544633372",
        "X-APICloud-AppKey": "2672b5911d8551540c1ea598e01c87fee217a1e5.1482500122476"
      },
      data: {
        values: {
          "username": usernameValue,
          "password": passwordValue
        }
      }
    }, function (ret, err) {
      if (ret) {
        // 保存用户信息
        $api.setStorage('userInfo', ret);

        api.alert({
          title: '提示',
          msg: '登录成功',
        }, function (ret, err) {
          if (ret) {
            api.closeWin();
          }
        });
      } else {
        api.toast({
          msg: '登录失败，用户名或密码错误',
          duration: 2000,
          location: 'middle'
        });
      }
    });
  }

  // 被注册页面调用，用于从注册页面传递用户名
  function fnSetUsername(username_) {
    usernameValue = username_;
    UIInput.value({
      id: usernameUIInputId,
      msg: username_
    }, function (ret, err) {});
  }
</script>

</html>